
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>购物商城-订单</title>
    <base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/"/>
    <style>
        * {
            margin: 0 auto;
            padding:0;
            list-style: none;
        }
        .header-a{
            text-decoration: none;
            color: #CCCCCC;
        }
        .header-a:hover{
            color: black;
        }
        .header_li1{
            float: left;
            line-height: 30px;
            margin-left: 24px;
            text-align: center;
        }
        .header_li1 a{
            color:#FFFFFF;
            text-decoration: none;
            font-size: 13px;
            border-right: #CCCCCC;
        }
        .header_li1 a:hover{
            color:#FFFF00;
        }
        .li1{
            height: 30px;
            line-height: 30px;
            margin-left: 5px;
            border-bottom: 1px solid #000000;
            font-size: 12px;
        }
        .li1a{
            text-decoration: none;
        }
        .span1{
            color:#F5D687;
            font-size: 18px;
            position: absolute;
            right: 5px;
        }
        .imag{
            padding-top: 5px;
            /*height:130px;*/
            height: 80px;
        }
        .table_div:hover{
            border:2px solid lightskyblue;
        }
        .table_div {
            border: 2px solid #DDDDDD;
            height: 100px;
            width: 160px;
        }
        .table_p a {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient: vertical;
        }
    </style>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script>
        function createOrder(){
            $.get("createOrder",{},function (data) {
                if(data.status != 200) {
                    alert(data.msg)
                }else {
                    window.location.href = "toOrderDetailPage";
                }
            },"json")
        }
        $(function () {
            var userName = "${user.name}"
            var text = "[<a href= 'toLoginPage'>登录</a>]&nbsp;[<a href= 'toRegisterPage'>免费注册</a>]"
            if(userName != "") {
                text = userName + "&nbsp;&nbsp[<a href= 'logout'>注销</a>]";
            }
            $("#loginSpan").html(text)
            var totalPrice = 0.0;
            <c:forEach var="selectedShopCar" items="${selectedShopCarList}">
                var price = ${selectedShopCar.price};
                var discount = ${selectedShopCar.discount};
                var buyNum = ${selectedShopCar.buyNum};
                function computePrice() {
                    var result = (price * discount * buyNum).toFixed(2);
                    totalPrice += price * discount * buyNum;
                    return result ;
                }
                $("#${selectedShopCar.shopCarId}").html("￥: " + computePrice());
            </c:forEach>
            $(".totalPrice").html(totalPrice.toFixed(2))
        });


    </script>
</head>
<body>

<div style="height: 32px;width: 100%;background-color: #EFEFEF;">
    <!--头页的第一部分-->
    <div style="height: 32px;width: 1000px;font-size: 12px;line-height: 32px;text-align:right">
        官方网站<a href="https://www.douyu.com/directory/myFollow">http://gz.gec-edu.org/?gzbdgzbdyueqianpc23</a>
        <span id="loginSpan"></span>
        [<a href="toShopCarPage">我的购物车</a>]
        [<a href="toOrderDetailPage">我的订单</a>]
        [<a href="#">设置为首页</a>]
        [<a href="#">加入收藏</a>]
    </div>
    <!--头页的第二部分-->
    <div style="width: 1000px;height: 150px;;position: relative">
        <img src="images/article/logo.gif">
        <img src="images/banner.gif" alt="" style="margin-top: 10px">

        <div style="position: absolute;right: 50px;top: 30px;font-size: 12px">
            <div style="border: 1px solid #CCCCCC;width: 70px;height: 20px;line-height:20px;text-align: center"><a href="#" style="" class = "header-a">关于我们</a></div>
            <div style="margin-top: 10px;border: 1px solid #CCCCCC;width: 70px;height: 20px;line-height:20px;text-align: center"><a href="#" style="" class = "header-a">联系方式</a></div>
        </div>
    </div>
    <!--头页的第三部分-->
    <div style="width: 100%;height: 30px;background-color: #CC3333 ">
        <div style="width: 1000px;height: 30px;">
            <ul>
                <li class="header_li1"><a href="#"> 首页</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0001"> 护肤</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0002"> 彩妆</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0003"> 香氛</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0004"> 身体护理</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0005"> 礼盒套装</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0006"> 母婴专区</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0007"> 男士专区</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0008"> 粉底</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0009"> 粉饼</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0010"> 睫毛膏</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0011"> 唇彩</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0012"> 腮红</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0013"> 食品保障</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0014"> 瘦身类</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0015"> 美容类</a></li>
            </ul>

        </div>

    </div>
</div>


<div style="width: 1000px; height: 1500px;background-color: #AACDED;margin-top: 180px;padding: 3px">
    <p style="font-weight: bold;margin-left: 20px">填写核对订单信息</p>
    <div style="padding: 10px;margin-top: 15px;width: 974px;height: 1480px;background-color: #FFF;border-radius: 3px">
        <div style="margin-top: 20px;width: 954px;height: 300px;background-color: #EFF5F8;border-top: #BBD4E0 2px solid;border-bottom: #BBD4E0 2px solid">
            <p>收货人信息</p>
            <table style="border-spacing: 10px;margin-left: 20px">
                <tr>
                    <td>
                        <span style="color: red">* </span>收货人姓名:
                    </td>
                    <td>
                        <input type="text" style="border:#81B0C7 2px solid;width: 180px;height: 25px" value="${user.name}">
                    </td>
                </tr>
                <tr>
                    <td>
                        <span style="color: red">* </span>地址:
                    </td>
                    <td>
                        <input type="text" style="border:#81B0C7 2px solid;width: 400px;height: 25px" value="${user.address}">
                    </td>
                </tr>
                <tr>
                    <td>
                        <span style="color: red">* </span>电话号码:
                    </td>
                    <td>
                        <input type="text" style="border:#81B0C7 2px solid;width: 180px;height: 25px" value="${user.phone}">
                        <span>用户接收发货通知短信及送货前确认</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span style="color: red">* </span>电子邮件:
                    </td>
                    <td>
                        <input type="text" style="border:#81B0C7 2px solid;width: 180px;height: 25px" value="${user.email}">
                        <span>用来接收订单提醒邮件，便于您及时了解订单状态</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span style="color: red">* </span>邮政编码:
                    </td>
                    <td>
                        <input type="text" style="border:#81B0C7 2px solid;width: 180px;height: 25px" value="520025">
                        <span>有助于快速确定送货地址</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="#">选用常用地址</a>
                    </td>
                    <td>

                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="submit" value="保存收货人信息" style="border:none;background-color: #FF9900;color: #FFF;font-size: 16px;font-weight: bold;width: 130px;border-radius: 3px;height: 32px">
                    </td>
                    <td>

                    </td>
                </tr>
            </table>
        </div>

        <div style="font-size: 14px">
            <p style="margin-left: 15px;margin-top: 7px">支付及配送方式</p>
            <p style="margin-left: 40px;margin-top: 7px">支付方式&nbsp;&nbsp;:&nbsp;&nbsp;在线支付</p>
            <p style="margin-left: 40px;margin-top: 7px">配送方式&nbsp;&nbsp;:&nbsp;&nbsp;快递运输</p>
            <p style="margin-left: 50px;margin-top: 7px">&nbsp;&nbsp;&nbsp;&nbsp;运费&nbsp;&nbsp;:&nbsp;&nbsp;0.00元<span style="color: red">(免运费)</span></p>
        </div>
        <div style="width: 970px;">
            <span style="margin-left: 10px;margin-top: 7px;font-size: 14px">商品清单</span>
            <span style="margin-left: 750px;margin-top: 7px;font-size: 14px"><a href="toShopCarPage">返回购物车修改</a></span>
        </div>
        <div >
            <div style="margin-top: 15px;text-align: center;font-size: 12px;width: 950px;height: 45px;line-height: 45px;background-color: #F7F4EB;border-bottom: #ccc 2px solid;border-top: #ccc 2px solid">
                <ul>
                    <li  style="float: left;width: 40%">商品名称</li>
                    <li  style="float: left;width: 15%">疯狂价</li>
                    <li  style="float: left;width: 10%">返现</li>
                    <li  style="float: left;width: 15%">小计(元)</li>
                    <li  style="float: left;width: 10%">库存</li>
                    <li  style="float: left;width: 10%">数量</li>
                </ul>
            </div>
            <table style="text-align: center;font-size: 14px;width: 950px;border-spacing: 0">
                <c:forEach  var="selectedShopCar" items="${selectedShopCarList}">
                    <tr style="height: 70px">
                        <td style="width: 40%;border-bottom: #CCCCCC 2px solid">
                            <a href="toArticleInfoPage?articleId=${selectedShopCar.articleId}">${selectedShopCar.title}</a>
                        </td>
                        <td style="width: 15%;border-bottom: #CCCCCC 2px solid;">￥${selectedShopCar.price}(${selectedShopCar.discount}折)</td>
                        <td style="width: 10%;border-bottom: #CCCCCC 2px solid">￥0.00</td>
                        <td style="width: 15%;border-bottom: #CCCCCC 2px solid;" id="${selectedShopCar.shopCarId}">￥27.93</td>
                        <td style="width: 10%;border-bottom: #CCCCCC 2px solid">${selectedShopCar.storage}</td>
                        <c:if test="${selectedShopCar.storage >=  selectedShopCar.buyNum}">
                            <td style="width: 10%;border-bottom: #CCCCCC 2px solid">${selectedShopCar.buyNum}</td>
                        </c:if>
                        <c:if test="${selectedShopCar.storage < selectedShopCar.buyNum}">
                            <td style="width: 10%;border-bottom: #CCCCCC 2px solid;color: red;font-weight: bold">${selectedShopCar.buyNum}</td>
                        </c:if>
                    </tr>
                </c:forEach>

            </table>
        </div>

        <div>
            <p style="font-size: 16px;font-weight: bold;margin:10px 0px 10px 10px">结算信息</p>
            <div style="text-align: center;width: 950px;height: 150px;border-top: #ECCDA2 3px solid;background-color: #FFF4D7">
                <div style="width: 900px;border-bottom: #eccda2 2px dashed;height: 80px;line-height: 80px">
                    <p>商品金额:<span class="totalPrice"></span>元＋运费:0.00元-优惠券:0.00元-礼品卡:0.00元-返现:0.00元</p>
                </div>
                <div style="width: 900px;height: 80px;line-height: 80px;font-size: 20px;font-weight: bold;text-align: right">
                    <p>应付总额:<span style="color: red">￥:<span class="totalPrice"></span></span></p>
                </div>
            </div>
            <div style="width: 950px;text-align: right;margin-top: 20px">
                <a href="javascript:;" onclick="createOrder()"><img src="images/submit.jpg" alt=""></a>
            </div>
        </div>
    </div>
    <div style="width: 1000px;margin-top: 40px">
        <img src="images/step.jpg" alt="">
    </div>
</div>

</body>
</html>
